<template>
  <div class="login-container">
    <div class="container">
      <div class="left">
        <div class="logo-container">
          <logo-component/>
        </div>
        <div class="logo">
          <img src="../../assets/login/logo2.png" alt=""/>
        </div>
      </div>
      <div class="right">
        <div class="box-card">
          <el-form
            ref="loginFormRef"
            :rules="loginRules"
            :model="loginData"
            class="login-form"
          >
            <div class="flex text-black items-center py-4">
              <div class="welcome">{{ titleObj.customerName }}</div>
              <div class="text-2xl flex-1 text-center title">
                欢迎登录{{ titleObj.projectName }}
                <div class="bottom-line"></div>
              </div>
            </div>
            <div class="login-content">
              <el-form-item prop="accountPhone">
                <div class="p-2">
                  <svg-icon icon-class="user"/>
                </div>
                <el-input
                  class="d-flex align-items-center"
                  ref="username"
                  size="large"
                  v-model="loginData.accountPhone"
                  placeholder="输入用户名"
                  name="username"
                />
              </el-form-item>

              <el-tooltip
                :disabled="isCapslock === false"
                content="Caps lock is On"
                placement="right"
              >
                <el-form-item prop="accountPassword">
                  <span class="p-2">
                    <svg-icon icon-class="password"/>
                  </span>
                  <el-input
                    class="d-flex align-items-center"
                    v-model="loginData.accountPassword"
                    placeholder="密码"
                    :type="passwordVisible === false ? 'password' : 'input'"
                    size="large"
                    name="password"
                    @keyup.native="checkCapslock"
                    @keyup.enter.native="handleLogin"
                  />
                  <span
                    class="mr-2 d-flex align-items-center"
                    @click="passwordVisible = !passwordVisible"
                  >
                    <svg-icon
                      :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
                      class="text-gray cursor-pointer"
                    />
                  </span>
                </el-form-item>
              </el-tooltip>
<!--              <div class="checkbox">-->
<!--                <el-form-item>-->
<!--                  <el-checkbox-group v-model="passwordCheckbox">-->
<!--                    <el-checkbox label="记住密码" name="type"/>-->
<!--                  </el-checkbox-group>-->
<!--                </el-form-item>-->
<!--              </div>-->

              <el-button size="default" :loading="loading" type="primary" class="w-full" @click.prevent="handleLogin">登录
              </el-button>
            </div>
          </el-form>
          <div class="bottom-title">
            <div class="left-line"></div>
            <div class="center-name">欢迎登录系统</div>
            <div class="right-line"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 重置密码弹框 -->
    <global-message-box
      v-if="isMessageBoxShow"
      @messageBoxSave="messageBoxSave"
      @messageBoxReceive="isMessageBoxShow = false"
    >
      <template #content>
        <div class="messageBoxContent">
          <el-form ref="form" :model="resetForm">
            <el-form-item>
              <span class="p-2">
                <svg-icon icon-class="password"/>
              </span>
              <el-input
                v-model="resetForm.onePassword"
                placeholder="请输入密码"
                class="d-flex align-items-center"
                :type="resetOnePasswordVisible === false ? 'password' : 'input'"
              />
              <span
                class="mr-2 d-flex align-items-center"
                @click="resetOnePasswordVisible = !resetOnePasswordVisible"
              >
                <svg-icon
                  :icon-class="resetOnePasswordVisible === false ? 'eye' : 'eye-open' "
                  class="text-gray cursor-pointer"
                />
              </span>
            </el-form-item>
            <el-form-item>
              <span class="p-2">
                <svg-icon icon-class="password"/>
              </span>
              <el-input
                v-model="resetForm.twoPassword"
                placeholder="请再次却密码"
                class="d-flex align-items-center"
                @keyup.enter.native="messageBoxSave"
                :type="resetTwpPasswordVisible === false ? 'password' : 'input'"
              />
              <span
                class="mr-2 d-flex align-items-center"
                @click="resetTwpPasswordVisible = !resetTwpPasswordVisible"
              >
                <svg-icon
                  :icon-class="resetTwpPasswordVisible === false ? 'eye' : 'eye-open'"
                  class="text-gray cursor-pointer"
                />
              </span>
            </el-form-item>
          </el-form>
        </div>
      </template>
    </global-message-box>
  </div>
</template>

<script>
  import { passwordValidator } from "./validator"
  import { updateLAccount, updateLAccountAndPwd } from "@/api/userControl/account"
  import { queryLoginInfo } from "@/api/user"
  import logoComponent from "@/components/LoginLogo"

  export default {
    name: "App",
    data() {
      return {
        loading: false,
        isCapslock: false,
        passwordVisible: false,
        resetOnePasswordVisible: false,
        resetTwpPasswordVisible: false,
        isMessageBoxShow: false,
        captchaBase64: "",
        passwordCheckbox: [],
        loginData: {
          accountPhone: null,
          accountPassword: "",
          projectCode: ""
        },
        loginRules: {
          accountName: [{ required: true, trigger: "blur" }],
          accountPassword: [
            { required: true, trigger: "blur", validator: passwordValidator }
          ]
        },
        // 重置密码form,
        resetForm: {
          onePassword: "",
          twoPassword: ""
        },
        titleObj: {}
      }
    },
    async created() {
      if (!this.$route.query.projectRef) {
        this.$message({
          message: "非法连接 无法登陆！",
          type: "warning"
        })
      } else {
        await this.queryLoginInfo()
      }
    },
    components: {
      logoComponent
    },
    methods: {
      async queryLoginInfo() {
        await this.$http.get("/user/queryMessageByProjectCode", {
          params: {
            projectRef: this.$route.query.projectRef
          }
        }).then(res => {
          if (res.data.status == "200") {
            this.titleObj = res.data.object
          }
        })
      },
      /**
       * 检查输入大小写状态
       */
      checkCapslock(e) {
        const { key } = e
        this.isCapslock = key && key.length === 1 && key >= "A" && key <= "Z"
      },
      handleLogin() {
        if (!this.$route.query.projectRef) {
          this.$message({
            message: "非法连接 无法登陆！",
            type: "warning"
          })
          return
        }
        this.$refs.loginFormRef.validate((valid) => {
          if (valid) {
            this.loading = true
            this.loginData.projectCode = this.titleObj.projectCode
            // return
            this.$store.dispatch("user/login", this.loginData).then((show) => {
              if (show) {
                this.isMessageBoxShow = show
              } else {
                // const query = this.$route.query
                // const redirect = query.redirect ?? "/"
                //
                // // todo query参数
                // const otherQueryParams = Object.keys(query).reduce(
                //   (acc, cur) => {
                //     if (cur !== "redirect") {
                //       acc[cur] = query[cur]
                //     }
                //     return acc
                //   },
                //   {}
                // )
                //
                // this.$router.push({ path: redirect, query: otherQueryParams })
                localStorage.setItem('projectRef', this.$route.query.projectRef)
                this.$router.push({ path: "/chart" })
              }
            })
              .catch(() => {
                // 验证失败，重新生成验证码
                // getCaptcha();
              })
              .finally(() => {
                this.loading = false
              })
          }
        })
      },
      messageBoxSave() {
        if (this.resetForm.onePassword == this.resetForm.twoPassword) {
          this.$refs.form.validate((valid) => {
            if (valid) {
              updateLAccountAndPwd({
                accountPhone: this.loginData.accountPhone,
                accountPassword: this.resetForm.onePassword,
                projectCode: this.titleObj.projectCode
              }).then(res => {
                if (res.status == "200") {
                  // const query = this.$route.query
                  // const redirect = query.redirect ?? "/"
                  //
                  // // todo query参数
                  // const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
                  //   if (cur !== "redirect") {
                  //     acc[cur] = query[cur]
                  //   }
                  //   return acc
                  // }, {})
                  localStorage.setItem('projectRef', this.$route.query.projectRef)
                  this.$router.push({ path: "/chart" })
                }
              })

            }
          })
        } else {
          this.$message({
            message: "两次密码输入不一致！",
            type: "warning"
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 100%;
    background: url("../../assets/login/login-bg.png") no-repeat;
    background-size: 100% 100%;

    .container {
      display: flex;
      width: 100vw;
      height: 100vh;
      /*width: 1236px;*/
      /*height: 700px;*/
      /*margin: 0 auto;*/
    }

    .left {
      flex: 1;
      position: relative;

      .logo-container {
        position: absolute;
        top: 120px;
        left: 120px;
      }

      .logo {
        position: absolute;
        bottom: 50px;
        left: 200px;
        overflow: hidden;
        padding-top: 10px;

        img {
          /*display: inline-block;*/
          width: 274px;
          height: 64px;
          overflow: hidden;
        }
      }
    }

    .right {
      margin-top: 213px;
      margin-right: 149px;
      height: 654px;
      width: 566px;
      background: #fff;
    }

    .box-card {
      height: 654px;
      width: 566px;

      .welcome {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 30px;
        font-size: 22px;
        font-weight: 600;
        color: #4a4a4a;
      }

      .title {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-bottom: 30px;
        font-size: 22px;
        font-weight: 500;
        color: #4a4a4a;

        .bottom-line {
          width: 42px;
          height: 4px;
          margin-top: 12px;
          background: #3276ff;
        }
      }

      .login-form {
        width: 520px;
        max-width: 100%;
        padding: 80px 0 0;
        margin: 0 auto;
        overflow: hidden;

        .captcha {
          position: absolute;
          top: 0;
          right: 0;

          img {
            width: 120px;
            height: 48px;
            cursor: pointer;
          }
        }
      }

      .login-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .checkbox {
          .el-form-item {
            background: transparent;
            border-radius: 5px;
          }
        }

        .w-full {
          width: 408px;
          height: 53px;

          &:hover {
            cursor: pointer;
          }
        }
      }

      .bottom-title {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 71px;

        .left-line {
          width: 132px;
          height: 1px;
          background: #d9d9d9;
        }

        .center-name {
          width: 96px;
          height: 24px;
          margin: 0 24px;
          font-size: 16px;
          font-weight: 500;
          color: #4a4a4a;
        }

        .right-line {
          width: 132px;
          height: 1px;
          background: #d9d9d9;
        }
      }
    }

    .messageBoxContent {
      width: 100%;
      height: 100%;

      ::v-deep.el-input__inner {
        color: #989898;
        background: transparent;
        border: 0;
        border-radius: 0;
        caret-color: #989898;

        &:-webkit-autofill {
          box-shadow: 0 0 0 1000px transparent inset !important;
          -webkit-text-fill-color: #fff !important;
        }

        &:-webkit-autofill,
        &:-webkit-autofill:hover,
        &:-webkit-autofill:focus,
        &:-webkit-autofill:active {
          transition: color 99999s ease-out, background-color 99999s ease-out;
          transition-delay: 99999s;
        }
      }
    }
  }

  .el-form-item {
    width: 418px;
    // background: rgb(0 0 0 / 10%);
    background: #f1f4f8;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 5px;
    padding: 0 10px;

    ::v-deep.el-form-item__content {
      display: flex;
    }
  }

  .el-input {
    background: transparent;

    // 子组件 scoped 无效，使用 :deep
    // .el-input__wrapper {
    //   padding: 0;
    //   background: transparent;
    //   box-shadow: none;

    //   .el-input__inner {
    //     color: #989898;
    //     background: transparent;
    //     border: 0;
    //     border-radius: 0;
    //     caret-color: #989898;

    //     &:-webkit-autofill {
    //       box-shadow: 0 0 0 1000px transparent inset !important;
    //       -webkit-text-fill-color: #fff !important;
    //     }

    //     // 设置输入框自动填充的延迟属性
    //     &:-webkit-autofill,
    //     &:-webkit-autofill:hover,
    //     &:-webkit-autofill:focus,
    //     &:-webkit-autofill:active {
    //       transition: color 99999s ease-out, background-color 99999s ease-out;
    //       transition-delay: 99999s;
    //     }
    //   }
    // }
  }

  .login-content {
    ::v-deep.el-input__inner {
      color: #989898;
      background: transparent;
      border: 0;
      border-radius: 0;
      caret-color: #989898;

      &:-webkit-autofill {
        box-shadow: 0 0 0 1000px transparent inset !important;
        -webkit-text-fill-color: #fff !important;
      }

      &:-webkit-autofill,
      &:-webkit-autofill:hover,
      &:-webkit-autofill:focus,
      &:-webkit-autofill:active {
        transition: color 99999s ease-out, background-color 99999s ease-out;
        transition-delay: 99999s;
      }
    }
  }
</style>
